<template>
	<view class="parking-place parking-detail">
		<view class="park-top" :style="'height:'+headHeight+'px;'">

			<u-navbar :autoBack="true" :bgColor="bgColor">
			</u-navbar>
		</view>

		<scroll-view :scroll-top="scrollTop" @scroll="scroll" scroll-y="true" class="scroll-Y">
			<view class="park-cont">
				<mapBox class="map" />
				<view class="tabcont">
					<view class="laybox flex-col flex-c">
						<view class="lay-tit lay-tit2 flex-cc">
							<view class="bar"></view>
						</view>
						<view class="lay-cont">
							<view class="list">
								<view class="li">
									<view class="item">
										<view class="near" v-if="parkInfo.isTop">距离最近</view>
										<view class="row1">{{ parkInfo.title }}</view>
										<view class="row2 flex-cb">
											<view class="left">
												<view class="dd flex-ac">
													<view class="icon">
														<image src="@/static/images/pic/parking/icon_park.png"
															mode="widthFix">
														</image>
													</view>
													<view class="info flex-ac">
														<view class="txt1">{{ parkInfo.lx }} <text>|</text></view>
														<view class="tag tag2">不可包月
														</view>
														<view class="tag tag2">
															<image src="@/static/images/pic/parking/icon_fp2.png"
																mode="widthFix"></image>
															不支持发票
														</view>
													</view>
												</view>
											</view>
										</view>
										<view class="row3 flex-cb">
											<view class="zt">
												<text class="s2">一般</text>
											</view>
											<view class="per flex">
												<view class="txt1">
													<text class="s2">34</text>
												</view>
												<view class="txt2">/ 60 </view>
											</view>
											<view class="step flex-ac">
												<view class="jd s2" style="width:55%"></view>
											</view>
										</view>
										<view class="row4">
											<image src="@/static/images/pic/parking/bg_dz.png" mode="widthFix"
												class="bg">
											</image>
											<view class="txt flex-cb">
												<view class="left flex-a flex-b">
													<view class="col1">
														<image src="@/static/images/pic/parking/icon_map.png"
															mode="widthFix">
														</image>
													</view>
													<view class="col2 flex-a">详细地址详细地址详细地址详细地址详细地址详细地址</view>
												</view>
												<view class="col3">
													<view class="go">
														<image src="@/static/images/pic/parking/icon_go.png"
															mode="widthFix">
														</image>
													</view>
													<view class="km">1.2km</view>
												</view>
											</view>
										</view>
										<view class="row5">
											<image src="@/static/images/pic/parking/pic1.jpg" mode="widthFix"></image>
										</view>
									</view>
								</view>

								<view class="li li2">
									<view class="item">
										<view class="item-tit flex-ac">
											<image src="@/static/images/pic/parking/icon_money.png" mode="widthFix">
											</image>
											<text>收费标准</text>

										</view>
										<view class="item-cont">
											收费标准详细内容收费标准详细内容收费标准详细内容收费标准详细内容收费标准详细内容收费标准详细内容收费标准详细内容收费标准详细内容收费标准详细内容收费标准详细内容
										</view>
									</view>
								</view>
							</view>
						</view>

						<view class="null2"></view>
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="park-bot">
			<view class="group flex-cb">
				<view class="fl">
					<button @click="callPhone">
						<image src="@/static/images/pic/parking/icon_tel.png" mode="widthFix"></image>
						<view class="txt">拨打服务</view>
					</button>
				</view>
				<view class="fr flex-ac">
					<button class="btn1 flex-cc">
						<image src="@/static/images/pic/parking/icon_send.png" mode="widthFix"></image>
						<view class="txt">导航</view>
					</button>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import mapBox from '@/components/map.vue';
	export default {
		components: {
			mapBox
		},
		data() {
			return {
				headHeight: 0,
				navBarHeight: 0,
				bgColor: 'transparent',
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				parkInfo: {
					title: "[路边停车]小太阳停车场",
					lx: "道路停车场",
					tc: 1,
					dz: "详细地址详细地址详细地址详细地址详细地址详细地址",
					km: 1.2,
					step: 24,
					isTop: true
				},
			}
		},
		onLoad() {
			// 获取胶囊按钮位置
			// 获取系统信息（主要是状态栏高度）
			const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
			const systemInfo = uni.getSystemInfoSync();

			// 计算顶部总高度：从屏幕顶部到导航栏底部的距离
			const statusBarHeight = systemInfo.statusBarHeight; // 状态栏高度
			const navBarHeight = menuButtonInfo.height + (menuButtonInfo.top - statusBarHeight) * 2; // 导航栏高度
			const totalTopHeight = statusBarHeight + navBarHeight; // 顶部总高度（含状态栏+导航栏）

			console.log('状态栏高度:', statusBarHeight);
			console.log('胶囊按钮信息:', menuButtonInfo);
			console.log('导航栏高度:', navBarHeight);
			console.log('顶部总高度:', totalTopHeight);
			this.headHeight = totalTopHeight + 20
			this.navBarHeight = menuButtonInfo.height
			this.imageTop = menuButtonInfo.top
			this.right = menuButtonInfo.width + 20
		},
		methods: {
			scroll: function(e) {
				this.old.scrollTop = e.detail.scrollTop
			},
			callPhone() {
				uni.makePhoneCall({
					phoneNumber: '18688888888' //仅为示例
				});
			}
		}
	}
</script>
<style>
	page {
		overflow: hidden;
		height: 100vh;
	}
</style>
<style lang="scss" scoped>
	@import '@/static/css/parking.scss'
</style>